<template>
    <div ref="chart" class="chart-render-box"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref,onBeforeUnmount } from 'vue'
const props = defineProps({
    xData: {
        type: Array,
        default: () => [],
    },
    sData: {
        type: Array,
        default: () => [],
    },
})

const [startValue, endValue] = [0, 6]
const option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
        backgroundColor: "rgba(24, 125, 255, 0.8)",
        textStyle: {
            color: "#ffffff",
        },
    },
    grid: {
        top: '13%',
        right: '2%',
        left: '10%',
        // bottom: '27%',
    },
    // 控制显示几个柱子
    dataZoom: {
        show: false,
        startValue,
        endValue
    },
    // dataZoom: {
    //     type: 'inside',
    //     maxValueSpan: 14
    // },
    xAxis: [
        {
            type: 'category',
            data: props.xData,
            axisLine: {
                lineStyle: {
                    color: '#02387B',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10,
                color: 'rgba(255,255,255,1)',
                textStyle: {
                    fontSize: 12,
                },
                formatter: function (e) {
                    let str = '';
                    let arr = e.split('');
                    for (let i = 0; i < arr.length; i++) {
                        str += arr[i] + '\n';
                    }
                    return str;
                }
            },
        },
    ],
    yAxis: [
        {
            name: '',
            nameTextStyle: {
                align: 'right'
            },
            axisLabel: {
                formatter: '{value}',
                color: 'rgba(255,255,255,0.52)',
            },
            axisLine: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108, 128, 151, 0.3)',
                },
            },
        }
    ],
    series: [
        {
            type: 'bar',
            data: props.sData,
            label: {
                normal: {
                    position: 'top',
                    color: '#fff',
                    show: true,
                },
            },
            barWidth: 15,
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "#15F7FF"
                    },
                    {
                        offset: 1,
                        color: "#15FFC5"
                    }
                    ])
                }
            },
        }
    ],
}
function _clearInterval (timeId) {
  timeId && window.clearInterval(timeId)
}
const chart = ref()
// const timer1 = ref()
let timer1 = null
onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    // _clearInterval(timer)
    myChart.setOption(option)
    // 使用定时器
    timer1 = setInterval(() => {
        const item1 = props.xData.shift()
        props.xData.push(item1)
        const item2 = props.sData.shift()
        props.sData.push(item2)
        myChart.setOption({
            series: {
                data: props.sData,
                type: 'bar'
            },
            xAxis: {
                type: 'category',
                data: props.xData
            }
        })
    }, 2000)
})
onBeforeUnmount(() => {
  _clearInterval(timer1)
})
</script>
<style scoped lang="scss">
.chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
}
</style>
